import { useUserContext } from '@/hooks/useHook';
import { Grid, Image, List } from 'antd-mobile';
import { useGoto } from '@/hooks';
import { ROUTE_KEY } from '@/routers/menus';
import { BankcardOutline, FaceRecognitionOutline, UnorderedListOutline } from 'antd-mobile-icons';
import style from './index.module.less';

/**
* 我的信息页面
*/
const My = () => {
  const { store } = useUserContext();
  const { go } = useGoto();
  return (
    <div className={style.container}>
      <Grid columns={10} className={style.card}>
        <Grid.Item span={4}>
          <Image src={store.avatar} alt="avatar" className={style.avatar} />
        </Grid.Item>
        <Grid.Item span={6}>
          <div className={style.name}>{ store.name }</div>
          <div className={style.edit} onClick={() => go(ROUTE_KEY.EDIT_INFO)}>编辑资料</div>
        </Grid.Item>
      </Grid>
      <List className={style.list}>
        <List.Item
          prefix={<FaceRecognitionOutline />}
          onClick={() => go(ROUTE_KEY.ORDER_COURSE)}
        >
          预约课程
        </List.Item>
        <List.Item
          prefix={<UnorderedListOutline />}
          onClick={() => go(ROUTE_KEY.MY_COURSE)}
        >
          我的课程表
        </List.Item>
        <List.Item
          prefix={<BankcardOutline />}
          onClick={() => go(ROUTE_KEY.MY_CARD)}
        >
          我的消费卡
        </List.Item>
      </List>
    </div>
  );
};

export default My;
